<template>
  <div
    @click="$emit('click')"
    style="
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10px;
    "
  >
    <!-- <div
      style="
        font-size: 84px;
        width: 100px;
        height: 100px;
        margin-bottom: 5px;
        border-radius: 20px;
        color: white;
        padding: 7px;
        box-sizing: border-box;
      "
      :style="{ background: background ? background : '#ffd576' }"
    ></div> -->
    <van-badge :content="num ? num : ''">
      <van-icon
        :name="icon"
        style="
          font-size: 50px;
          margin-bottom: 5px;
          border-radius: 20px;
          color: white;
          box-sizing: border-box;
        "
      />
    </van-badge>
    <div style="font-size: 14px">{{ title }}</div>
  </div>
</template>

<script>
export default {
  name: 'iconButton',
  props: ['icon', 'title', 'background', 'num'],
  data() {
    return {}
  },
}
</script>

<style>
</style>